<template>
  <div class="app-container">
    <div>
      选择机器类型
      <el-cascader
        style="width: 300px;"
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }"></el-cascader>
      <el-button type="primary" class="handle-del mr10" @click="createEcs()">提交创建</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "createEcs",
  data() {
    return {
      value: [],
      options: [
        {
          "Status": "available",
          "value": "cn-hangzhou",
          "RegionEndpoint": "ecs.aliyuncs.com",
          "label": "华东1（杭州）",
          children: [
            {
              value: 'cn-hangzhou-i',
              label: '可用区I',
              children: [
                {
                  value: 'ecs.t5-c1m1.large',
                  label: '2核2G'
                },
                {
                  value: 'ecs.c6a.xlarge',
                  label: '4核8G'
                }
                // {
                //   value: 'ecs.g6r.xlarge',
                //   label: '4核16G'
                // }
              ]
            }
          ]
        }
      ]
    };
  },
  created() {
  },
  methods: {
    createEcs() {
      if(this.value.length == 0){
        this.$message({
          message: '请选择机器类型',
          type: 'warning'
        })
        return;
      }
      axios.get('/aliyunEcs/createEcs',{
        params:{
          region_id:this.value[0],
          zone_id:this.value[1],
          instance_type:this.value[2]
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: 'ECS创建任务提交成功，请等待2~3分钟',
              type: 'success'
            })
          } else {
            this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
  }
}
</script>

<style scoped>

</style>
